<template>
  <!-- 异常工单 认领工单  -->
  <a-modal
    v-model:open="visible"
    title="认领工单"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="420"
    @cancel="cancel"
    centered
  >
    <div>
      是否认领{{ props.rowData.stationName }}电站的【{{
        props.rowData.serialCode
      }}】工单？
    </div>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import storage from "@/utils/storage";
import { WORK_ORDER_TYPE } from "@/constants/workOrder";
const $api = inject("$api");
const props = defineProps({
  claimOrderVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
});
const visible = ref(props.claimOrderVisible);
const emits = defineEmits(["update:claimOrderVisible", "getOrderList"]);
watch(
  () => props.claimOrderVisible,
  async (val) => {
    visible.value = val;
  }
);

const cancel = () => {
  emits("update:claimOrderVisible", false);
};
const loading = ref(false);
const handleSubmit = async () => {
  loading.value = true;
  const res = await $api.claimWorkOrder({
    id: props.rowData.id,
    type: WORK_ORDER_TYPE.ERROR,
  });
  loading.value = false;
  if (res && res.code === 0) {
    message.success("认领成功");
    cancel();
    emits("getOrderList");
  }
};
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 250px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
</style>